//初始化
var form;
var $;
var element;
var laydate;
layui.use(['element','form','laydate'],function() {
    form = layui.form;
    $ = layui.jquery;
    element = layui.element;
    laydate = layui.laydate;
    load();
    getEchartsUserInfo();

    //获取时间
    laydate.render({
        elem: '#test1',
        type: 'date',
        format: 'yyyy-M-d',
        trigger: 'click',
        done: function (value, date) {
            if (value == "" || value == null || value == undefined) {
                getEchartsUserInfo();
            } else {
                getEchartsUserInfo2(value);
            }

        }
    });


    function load() {
        $(".tit_btn").bind('click', function () {
            location.reload();
        });
    }

    function getEchartsUserInfo() {
        $.get("/personnel/selCommodityCollection", function (res) {

            $(".td_class").remove();

            var courseClassName = [];
            var lookNum = [];
            for (var a = 0; a < res.data.length; a++) {
                courseClassName.push(res.data[a].courseClassName);
                lookNum.push(res.data[a].LookNum);
                $(".tab_tr").append("<td class='td_class'>" + res.data[a].courseClassName + "</td>>");
                $(".tab_tr1").append("<td class='redNum td_class'>" + res.data[a].LookNum + "</td>>");
            }
            getEcharts(courseClassName, lookNum);
        });
    }


    function getEcharts(courseClassName, lookNum) {
        var chartDom = document.getElementById('userecharts');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            title: {
                text: '商品收藏统计图标',
                subtext: '思云产品'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: courseClassName
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: courseClassName
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '数据量',
                    type: 'bar',
                    data: lookNum,
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };
        option && myChart.setOption(option);
        window.onresize = myChart.resize;
    }

    //根据指定时间，查询商品收藏量
    function getEchartsUserInfo2(date) {
        $.get("/personnel/selCommodityCollection2", {"date": date}, function (res) {

            $(".td_class").remove();

            var courseClassName = [];
            var lookNum = [];
            for (var a = 0; a < res.data.length; a++) {
                courseClassName.push(res.data[a].courseClassName);
                lookNum.push(res.data[a].LookNum);
                $(".tab_tr").append("<td class='td_class'>" + res.data[a].courseClassName + "</td>>");
                $(".tab_tr1").append("<td class='redNum td_class'>" + res.data[a].LookNum + "</td>>");
            }
            getEcharts(courseClassName, lookNum);
        });
    }
});